<!DOCTYPE html> <!--告知浏览器是哪一个版本-->
<html>
    <head>
        <meta charset="utf-8"> <!--定义页面使用编码-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"><!--适应手机-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<!-- css样式表 -->
<style>
    body
        {
            background-image:url(http://pic.soutu123.com/back_pic/04/16/88/5258262b78452a5.jpg);
            background-size:cover;
            background-repeat: no-repeat;
        }
    .loginform{
        /*上边界距离*/
        margin-top: 100px;
    }
   
</style>
 
 
    </head>
<body>
<div class="loginform">
    <!-- <h1 class="text-center">电子相册系统</h1> -->
    <div class="container-fluid">
        <div class="row bg">
            <div class="col-md-4 col-md-offset-4" style="border: #4d4d4d solid 1px;background-color: hsl(0, 0%, 98%);">
                <form class="form-container" role="form">
                    <h3 class="text-center">注册页面</h3>
                    <div class="form-group">
                        <label for="username">用户名 </label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                         </div>
                    </div>
 
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
 


                    <div class="form-group">
                        <label for="password">重复密码</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" id="rpassword" placeholder="请再次输入密码">
                    </div>


                    <div class="form-group">
                        <label for="password">昵称</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="text" class="form-control" id="nickname" placeholder="请输入昵称:">
                    </div>

                    
                    <div>
                        <button class="btn btn-primary btn-block active" id="in" type="submit">登录</button>
                    </div>
 
                    <div class="well well-sm" style="text-align:center;">
                    <button type="button" class="btn btn-link">注册用户</button>
                    <button type="button" class="btn btn-link">找回密码</button>
                    </div>
 
                </form>        
            </div>
        </div>
    </div>
</div>
<script src="./axios/axios.js"></script>
<script>
    //获取元素  
    const formele = document.querySelector('form');
    const username = formele.querySelector('#username');
    const password  = formele.querySelector('#password');
    const rpassword = formele.querySelector('#rpassword');
    const nickname  = formele.querySelector('#nickname');

    formele.addEventListener('submit', async e=>{
        e.preventDefault();

        const data = {
            username: username.value,
            password: password.value,
            rpassword: rpassword.value,
            nickname: nickname.value,
        }
        // axios({})
        // axios.get(地址,{})
        // axios.post(地址,{请求体},{配置项})
        const instance = axios.create({
            baseURL:'http://localhost:8080',
            Headers:{
                'content-type':'application/x-www-form-urlencoded'
            }
        })
        // TODO:这是响应拦截器等下回来写
        // 响应拦截器
        instance.interceptors.response.use(function(res){
            // 这个res 就是服务器要给到浏览器的数据 
            // console.log(res);
            // 如果注册失败 也要返回错误消息  
            if(res.data.code === 0 ){
                alert(res.data.message)
            }
            return res.data;
        })

        instance.post('/users/register',data)
        .then(res=>{
            // console.log(res); // 返回的消息外边被一个对象包裹
            // 我们想实现 不被外部包裹 
            // 创建一个响应拦截器  
            // 在服务器给浏览器数据之前 拿到数据
            // 将数据处理好以后再返回 
            console.log(res);// 这个就是处理以后的数据

        });

    })
</script>
</body>
</html>